// 不能使用es6 语法  基于nodejs  要使用commonjs
const path = require('path')
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入分离 css 文件的 模块
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  // 入口: 从哪个文件开始打包
  entry: './src/main.js',
  // output: 配置输出 (打包到哪去)
  output: {
    // 打包输出的目录 (必须是绝对路径)
    path: path.join(__dirname, 'dist'),
    // 打包生成的文件名
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './public/index.html' }),
    // 定义打包好的文件的存放路径和文件名
    new MiniCssExtractPlugin({
      filename: 'css/index.css'
    })
  ],
  // 打包模式 production 压缩/development 不压缩
  module: {
    // loader的规则
    rules: [
      // 配置css 文件解析
      {
        // 正则表达式，用于匹配所有的css文件
        test: /\.css$/,
        // 先用 css-loader 让webpack能够识别 css 文件的内容
        // 再用 style-loader 将样式, 以动态创建style标签的方式添加到页面中去
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      // 配置 less 文件的解析
      {
        test: /\.less$/,
        use: [
          // 分离出 css 内容
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          },
          'css-loader',
          'less-loader'
        ]
      },
      //解析图片 内置asset 不需要导入 插件loader等
      {
        test: /\.(png|jpg|gif|jpeg)$/i,
        type: 'asset',
        //处理大于8kb的图片  并且再创建一个images文件夹 hash 是随机的值 ext 扩展名  中间可以加[name]- 等
        generator: {
          filename: 'images/[hash][ext]'
        }
      },
      // 处理字体图标的解析
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        type: 'asset',
        generator: {
          filename: 'fonts/[hash][name][ext]'
        }
      },
      // babel 的介绍 => 用于处理高版本 js语法 的兼容性
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  // 修改默认的端口 8080 
  // 因为缓存在内存当中 ,开发的时候要停掉服务 然后再yarn build一下 dist 文件就生成了
  devServer: {
    port: 80, // 端口号
    open: true // 自动打开浏览器
  },
  mode: 'development'

}